<template>
  <div>
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

      <el-form-item label="父级权限id" prop="pid">
        <el-input v-model.number="ruleForm.pid" :disabled="true"></el-input>
      </el-form-item>

      <el-form-item label="权限名称" prop="name">
        <el-input v-model="ruleForm.name" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="权限值" prop="value">
        <el-input v-model="ruleForm.value" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="前端资源路径" prop="uri">
        <el-input v-model="ruleForm.uri" autocomplete="off"></el-input>
      </el-form-item>


      <el-form-item label="权限类型" prop="type">
        <el-select v-model.number="ruleForm.type" autocomplete="off" placeholder="请选择权限类型">
          <el-option label="目录" value='0'></el-option>
          <el-option label="菜单" value='1'></el-option>
        </el-select>
      </el-form-item>


      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: 'AddPermission',
    data () {
      var pid = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('父级id不能为空'))
        }
        callback()
      }

      var name = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('权限名称不能为空'))
        }
        callback()
      }

      var value = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('权限值不能为空'))
        }
        callback()
      }

      var uri = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('前端资源路径不能为空'))
        }
        callback()
      }

      var type = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('权限类型不能为空'))
        }
        callback()
      }

      return {
        ruleForm: {
          pid: 0,
          name: '',
          value: '',
          uri: '',
          type: 0
        },
        rules: {
          pid: [
            {validator: pid, trigger: 'blur'}
          ],
          name: [
            {validator: name, trigger: 'blur'}
          ],
          value: [
            {validator: value, trigger: 'blur'}
          ],
          uri: [
            {validator: uri, trigger: 'blur'}
          ],
          type: [
            {validator: type, trigger: 'blur'}
          ]
        },
      }
    },
    created () {
      this.ruleForm.pid = this.$route.query.form
      console.log(this.ruleForm.pid)
    },
    methods: {
      submitForm (ruleForm) {
        this.$refs[ruleForm].validate((valid) => {
          if (valid) {
            var data = {
              pid: this.ruleForm.pid,
              name: this.ruleForm.name,
              value: this.ruleForm.value,
              uri: this.ruleForm.uri,
              type: this.ruleForm.type
            }
            console.log(data)
            this.$http.postRequest('user/role/permission/create', data, 'application/json;charset=UTF-8').then(res => {
              if (res.data.code == 200) {
                this.$message({
                  message: '恭喜你，添加一条成功消息',
                  type: 'success'
                })
                let timer = setTimeout(() => {
                  //跳转页面
                  this.$router.push('/permission')
                }, 2000)
                // 离开当前页面时销毁定时器
                this.$once('hook:beforeDestroy', () => {
                  clearInterval(timer)
                  timer = null
                })
              } else if (red.data.code == 403) {
                this.$message({
                  message: '未获取该权限！',
                  type: 'success'
                })
                let timer = setTimeout(() => {
                  //跳转页面
                  this.$router.push('/permission')
                }, 2000)
                // 离开当前页面时销毁定时器
                this.$once('hook:beforeDestroy', () => {
                  clearInterval(timer)
                  timer = null
                })
              } else {
                this.$message.info(res.data.message)
              }
            }).catch(err => {
              this.$message.info(err)
            })
          } else {
            this.$message.info('error submit!!')
            return false
          }
        })
      },
      resetForm (formName) {
        this.$refs[formName].resetFields()
      }
    }
  }
</script>

<style scoped>

</style>
